<template>
	<view class="content">
		<view class="line_info">
			<view class="line">当前线路: {{lineData.first}} -- {{lineData.end}}</view>
			<view>剩余时间: {{lineData.remainingTime}}分钟</view>
			<view>距离下一次到站: {{lineData.stationsNumber}}站</view>
			<view>剩余距离: {{lineData.km}}km</view>
			<view>列车当前所在:{{lineData.runStationsName}}</view>
			<view>首班时间:{{lineData.startTime}} -- 末班时间:{{lineData.endTime}}</view>
		</view>
		<view class="metro_line">
			<scroll-view scroll-x class="line-scroll">
				<view class="scroll-view" :style="width">
					<view class="metro_name">
						<view v-for="(item,index) in line" :style="item_width">{{item.name}}</view>
					</view>
					<view class="scroll_metro_line"  :style="line_color">
						<view class="metro_line_item" v-for="(item,index) in line">
							<view class="arrive" v-if="index+1==runStations.seq"></view> 
							<view class="not_arrive" v-else-if="index+1>runStations.seq"></view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		http
	} from "../../utils/request.js"
	export default {
		data() {
			return {
				lineId: "",
				currentName: "",
				lineData: {},
				line: [],
				width: "",
				item_width: "",
				line_margin: "",
				line_color:"",
				runStations:"",
			}
		},
		onLoad(data) {
			let that = this;
			that.lineId = data.lineId;
			that.currentName = data.currentName;
			http({
				url: "/prod-api/api/metro/line/" + that.lineId
			}).then((res) => {
				that.lineData = res.data.data;
				that.line = res.data.data.metroStepList;
				let differ=that.line[0].seq-1;
				that.line.forEach((item,index)=>{
					item.seq=item.seq-differ;
				})
				that.width = "width:" + Math.ceil((that.line.length / 4)) + "00%;";
				that.item_width = "width:calc(" + 100 / that.line.length + "%);";
				that.line_margin = "margin:20rpx calc(" + 100 / that.line.length / 2 + "%);";
				that.line.forEach((e)=>{
					if(e.name==that.lineData.runStationsName){
						that.runStations=e;
					}
				})
				// that.line_color="background: linear-gradient(to right,yellow 0%,yellow "+100/that.line.length*that.runStations.seq+"%,#dedede "+100/that.line.length*that.runStations.seq+"%,#dedede 100%);"
				that.line_color="background: linear-gradient(to right,yellow 0%,yellow "+((100/that.line.length*that.runStations.seq)-(100/that.line.length/2))+"%,#dedede "+((100/that.line.length*that.runStations.seq)-(100/that.line.length/2))+"%,#dedede 100%);"
				uni.setNavigationBarTitle({
					title: that.lineData.name
				})
			})
		},
		methods: {

		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
	}

	.content {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		background-color: #ecf0f1;
	}

	.line_info {
		height: 50%;
		color: red;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.line_info .line {
		font-size: 1.5rem;
		margin-bottom: 50rpx;
		color: black;
	}

	.metro_line {
		width: 100%;
		height: 50%;
		padding: 20rpx;
		box-sizing: border-box;
		border-top: 1px solid black;
	}

	.line-scroll {
		width: 100%;
		height: 100%;
	}

	.scroll-view {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 100%;
	}

	.scroll-view>view {
		display: flex;
	}

	.metro_name {
		width: 100%;
		margin-bottom: 40rpx;
	}

	.metro_name>view {
		text-align: center;
	}

	.scroll_metro_line {
		height: 30rpx;
		border-radius: 50px;
		justify-content: space-around;
	}
	.metro_line_item,.metro_line_item .arrive,.metro_line_item .not_arrive{
		width: 40rpx;
		height: 30rpx;
		border-radius: 50px;
		background-color: gold;
	}
	.metro_line_item .arrive{
		background-color: red;
	}
	.metro_line_item .not_arrive{
		background-color: #a3a3a3;
	}
</style>
